<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>英雄管理</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        .btn {
            margin: 2px;
            padding: 5px 10px;
            cursor: pointer;
        }
        .add-btn {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h2>英雄列表</h2>
    <button class="add-btn" onclick="showAddForm()">新增英雄</button>
    
    <!-- 新增/修改表单 -->
    <div id="heroForm" style="display: none;">
        <h3 id="formTitle">新增英雄</h3>
        <form id="form">
            <input type="hidden" name="hid" id="hid">
            <div>英雄名称：<input type="text" name="hname" id="hname" required></div>
            <div>英雄定位：<input type="text" name="position" id="position" required></div>
            <div>难度：<input type="text" name="difficulty" id="difficulty" required></div>
            <div>性别：<input type="text" name="gender" id="gender" required></div>
            <div>背景故事：<textarea name="backgroundStory" id="backgroundStory" required></textarea></div>
            <div>
                <button type="button" onclick="saveHero()">保存</button>
                <button type="button" onclick="cancelEdit()">取消</button>
            </div>
        </form>
    </div>

    <!-- 英雄列表 -->
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>英雄名称</th>
                <th>定位</th>
                <th>难度</th>
                <th>性别</th>
                <th>背景故事</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="heroList"></tbody>
    </table>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <script>
        $(function() {
            loadHeroes();
        });

        function loadHeroes() {
            axios.get('/hero/getJsonAll')
                .then(res => {
                    if(res.data.code === 200) {
                        const heroes = res.data.data || [];
                        let html = '';
                        heroes.forEach(hero => {
                            html += `
                                <tr>
                                    <td>${hero.hid}</td>
                                    <td>${hero.hname || '-'}</td>
                                    <td>${hero.position || '-'}</td>
                                    <td>${hero.difficulty || '-'}</td>
                                    <td>${hero.gender || '-'}</td>
                                    <td>${hero.backgroundStory || '-'}</td>
                                    <td>
                                        <button class="btn" onclick="editHero(${hero.hid})">修改</button>
                                        <button class="btn" onclick="deleteHero(${hero.hid})">删除</button>
                                    </td>
                                </tr>`;
                        });
                        $("#heroList").html(html || '<tr><td colspan="7" style="text-align:center">暂无数据</td></tr>');
                    } else {
                        alert('获取数据失败：' + res.data.msg);
                    }
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    $("#heroList").html('<tr><td colspan="7" style="text-align:center;color:red">加载失败</td></tr>');
                });
        }

        function showAddForm() {
            $('#formTitle').text('新增英雄');
            $('#form')[0].reset();
            $('#hid').val('');
            $('#heroForm').show();
        }

        function editHero(hid) {
            $('#formTitle').text('修改英雄');
            axios.get(`/hero/${hid}`).then(res => {
                if(res.data.code === 200) {
                    const hero = res.data.data;
                    $('#hid').val(hero.hid);
                    $('#hname').val(hero.hname);
                    $('#position').val(hero.position);
                    $('#difficulty').val(hero.difficulty);
                    $('#gender').val(hero.gender);
                    $('#backgroundStory').val(hero.backgroundStory);
                    $('#heroForm').show();
                } else {
                    alert('获取英雄信息失败：' + res.data.msg);
                }
            });
        }

        function saveHero() {
            const hero = {
                hid: $('#hid').val() || null,
                hname: $('#hname').val(),
                position: $('#position').val(),
                difficulty: $('#difficulty').val(),
                gender: $('#gender').val(),
                backgroundStory: $('#backgroundStory').val()
            };

            // 表单验证
            if (!hero.hname || !hero.position || !hero.difficulty || !hero.gender) {
                alert('请填写完整信息');
                return;
            }

            const isAdd = !hero.hid;
            const url = isAdd ? '/hero/addHero' : '/hero/updateHero';

            axios({
                method: 'post',
                url: url,
                data: hero,
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                if(res.data.code === 200) {
                    alert(isAdd ? '新增成功' : '修改成功');
                    cancelEdit();
                    loadHeroes();
                } else {
                    alert((isAdd ? '新增' : '修改') + '失败：' + res.data.msg);
                }
            }).catch(error => {
                console.error('保存失败:', error);
                alert('保存失败，请稍后重试');
            });
        }

        function deleteHero(hid) {
            if(confirm('确定要删除这个英雄吗？')) {
                axios({
                    method: 'delete',
                    url: `/hero/removeHero`,
                    params: { hid: hid }
                }).then(res => {
                    if(res.data.code === 200) {
                        alert('删除成功');
                        loadHeroes();
                    } else {
                        alert('删除失败：' + res.data.msg);
                    }
                }).catch(error => {
                    console.error('删除失败:', error);
                    alert('删除失败，请稍后重试');
                });
            }
        }

        function cancelEdit() {
            $('#heroForm').hide();
            $('#form')[0].reset();
        }
    </script>
</body>
</html>